<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生名称: {{ name }}</h2>
    <h2>学生性别: {{ sex }}</h2>
    <h2>学生年龄: {{ myAge + 1 }}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
  export default {
    name: 'Student',
    data() {
      return {
        msg: '我是一个学生',
        myAge: this.age
      }
    },
    methods: {
      updateAge() {
        // eslint-disable-next-line vue/no-mutating-props
        this.myAge = 99
      }
    },
    props: ['name', 'sex', 'age']  // 方式一：简单声明接收

    // 方式二：接收的同时对数据进行类型限制
    /*props: {
      name: String,
      sex: String,
      age: Number
    }*/

    // 方式三：接收的同时对数据进行类型限制 + 默认值指定 + 必要性限制
    /*props: {
      name: {
        type: String,
        required: true  // 表示此属性必传
      },
      age: {
        type: Number,
        default: 99  // 默认值
      }
    }*/
  }
</script>